<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="/img/kurento.png" type="image/png">

  <!-- WebJars -->
  <link rel="stylesheet" href="/webjars/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/webjars/demo-console/index.css">
  <link rel="stylesheet" href="/webjars/ekko-lightbox/dist/ekko-lightbox.min.css">
  <script src="/webjars/jquery/dist/jquery.min.js"></script>
  <script src="/webjars/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/webjars/demo-console/index.js"></script>
  <script src="/webjars/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
  <script src="/webjars/webrtc-adapter/release/adapter.js"></script>

  <!-- Kurento -->
  <link rel="stylesheet" href="/css/kurento.css">
  <script src="/js/kurento-utils.min.js"></script> <!-- JAR from Maven -->
  <script src="/js/index.js"></script>

  <title>Kurento Java Tutorial - RTP Receiver</title>
</head>

<body>
  <header>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
          <a class="navbar-brand" href=".">Kurento Tutorial</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="https://github.com/Kurento/kurento-tutorial-java/tree/master/kurento-rtp-receiver">
                <span class="glyphicon glyphicon-file"></span>Source Code</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="page-header">
      <h1>Kurento Java Tutorial - RTP Receiver</h1>
      <p>
        This web application consists of a simple RTP stream pipeline: an
        <i>RtpEndpoint</i> is configured in KMS to listen for one incoming
        video stream. This stream must be generated by an external program.
        Visual feedback is provided in this page, by connecting the
        <i>RtpEndpoint</i> to a <i>WebRtcEndpoint</i> in receive-only mode.
      </p>
      <p>
        The Java client application <em>connects to all events</em> emitted from
        Kurento and prints log messages for each one, so this application is
        also a good reference to understand what are those events and their
        relationship with how KMS works.
      </p>
      <p>
        To run this demo follow these steps:
      </p>
      <ol>
        <li>Open this page with a WebRTC-compliant browser (Chrome, Firefox).</li>
        <li>Click on <i>Start</i> to begin the stream negotiation.</li>
        <li>Copy the KMS IP and Port information to the external streaming program.</li>
        <li>Click on <i>Stop</i> to finish the test.</li>
      </ol>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-12">
            <a id="start" href="#" class="btn btn-success">
              <span class="glyphicon glyphicon-play"></span>Start</a>
            <a id="stop" href="#" class="btn btn-danger">
              <span class="glyphicon glyphicon-stop"></span>Stop</a>
          </div>
        </div>
        <br>
        <div class="row">
          <input type="checkbox" id="useComedia" checked>
          <label for="useComedia">
            Automatic RTP/RTCP port discovery ("Connection-Oriented Media")
          </label>
        </div>
        <div class="row">
          <input type="checkbox" id="useSrtp">
          <label for="useSrtp">Sender uses SRTP</label>
        </div>
        <br>
        <div class="row">
          <label class="control-label">KMS connection info</label>
          <br>
          <textarea id="msgConnInfo">No info received yet...</textarea>
        </div>
        <div class="row">
          <label class="control-label">SDP response</label>
          <br>
          <textarea id="msgSdpText">No info received yet...</textarea>
        </div>
      </div>

      <div class="col-md-6">
        <div id="videoBig">
          <video id="videoRtp" autoplay playsinline width="640px" height="480px" poster="/img/webrtc.png"></video>
        </div>
      </div>
    </div>
    <div class="row">
      <br>
      <label class="control-label">Sample RTP sender programs</label>
      <br>
      <p>
        You should be able to send an RTP stream to Kurento with any external
        application or device that supports this kind of streams. For example,
        VLC should be able to output an RTP stream, and also there are some
        devices in the market -such as video surveillance cameras- which also
        output an RTP stream.

        For this tutorial, we provide a sample GStreamer launch command which
        <em>simulates</em> an RTP streaming application. You just need to copy
        the provided commands, substitute any placeholder with the actual
        required values, and run them.
        <br>
        First step is to install the required dependencies for these sample
        GStreamer commands:
      </p>
      <pre id="gstCommand">
sudo apt-get update && sudo apt-get install --no-install-recommends --yes \
    gstreamer1.0-{tools,libav} gstreamer1.0-plugins-{base,good,bad,ugly} \
    gstreamer1.5-{tools,libav} gstreamer1.5-plugins-{base,good,bad,ugly}
      </pre>
    </div>
    <div class="row">
      <br>
      <label class="control-label">Sample RTP sender</label>
      <br>
      <p>
        This sample GStreamer pipeline command includes the following features:<br>
        - Sends RTP and RTCP packets to KMS (for both Audio and Video streams).<br>
        - Receives and prints Video RTCP packets received from KMS.<br>
        - Binds to specific output ports for automatic RTP/RTCP port discovery.<br>
      </p>
      <pre id="gstCommand">
PEER_A={KMS_AUDIO_PORT} PEER_V={KMS_VIDEO_PORT} PEER_IP={KMS_PUBLIC_IP} \
SELF_PATH="{PATH_TO_VIDEO_FILE}" \
SELF_A=5006 SELF_ASSRC=445566 \
SELF_V=5004 SELF_VSSRC=112233 \
bash -c 'gst-launch-1.0 -e \
    rtpbin name=r sdes="application/x-rtp-source-sdes,cname=(string)\"user\@example.com\"" \
    uridecodebin uri="file://$SELF_PATH" name=d \
    d. ! queue \
        ! audioconvert ! audioresample ! opusenc \
        ! rtpopuspay \
        ! "application/x-rtp,payload=(int)96,clock-rate=(int)48000,ssrc=(uint)$SELF_ASSRC" \
        ! r.send_rtp_sink_0 \
    d. ! queue \
        ! videoconvert ! x264enc tune=zerolatency \
        ! rtph264pay \
        ! "application/x-rtp,payload=(int)103,clock-rate=(int)90000,ssrc=(uint)$SELF_VSSRC" \
        ! r.send_rtp_sink_1 \
    r.send_rtp_src_0 \
        ! udpsink host=$PEER_IP port=$PEER_A bind-port=$SELF_A \
    r.send_rtcp_src_0 \
        ! udpsink host=$PEER_IP port=$((PEER_A+1)) bind-port=$((SELF_A+1)) sync=false async=false \
    udpsrc port=$((SELF_A+1)) \
        ! r.recv_rtcp_sink_0 \
    r.send_rtp_src_1 \
        ! udpsink host=$PEER_IP port=$PEER_V bind-port=$SELF_V \
    r.send_rtcp_src_1 \
        ! udpsink host=$PEER_IP port=$((PEER_V+1)) bind-port=$((SELF_V+1)) sync=false async=false \
    udpsrc port=$((SELF_V+1)) \
        ! tee name=t \
        t. ! queue ! r.recv_rtcp_sink_1 \
        t. ! queue ! fakesink dump=true async=false'
      </pre>
    </div>
    <div class="row">
      <br>
      <label class="control-label">Sample SRTP sender</label>
      <br>
      <p>
        This sample GStreamer pipeline command includes the following features:<br>
        - Sends SRTP and SRTCP packets to KMS (only for the Video stream).<br>
        - Receives and prints Video SRTCP packets received from KMS.<br>
        - Binds to specific output ports for automatic RTP/RTCP port discovery.<br>
      </p>
      <pre id="gstCommand">
PEER_V={KMS_VIDEO_PORT} PEER_VSSRC={KMS_VIDEO_SSRC} PEER_IP={KMS_PUBLIC_IP} \
PEER_KEY="343332315A595857565554535251504F4E4D4C4B4A494847464544434241" \
SELF_PATH="{PATH_TO_VIDEO_FILE}" \
SELF_V=5004 SELF_VSSRC=112233 \
SELF_KEY="4142434445464748494A4B4C4D4E4F505152535455565758595A31323334" \
SRTP_CAPS="payload=(int)103,ssrc=(uint)$PEER_VSSRC,roc=(uint)0, \
    srtp-key=(buffer)$PEER_KEY, \
    srtp-cipher=(string)aes-128-icm,srtp-auth=(string)hmac-sha1-80, \
    srtcp-cipher=(string)aes-128-icm,srtcp-auth=(string)hmac-sha1-80" \
bash -c 'gst-launch-1.5 -e \
    rtpsession name=r sdes="application/x-rtp-source-sdes,cname=(string)\"user\@example.com\"" \
    srtpenc name=e key="$SELF_KEY" \
        rtp-cipher="aes-128-icm" rtp-auth="hmac-sha1-80" \
        rtcp-cipher="aes-128-icm" rtcp-auth="hmac-sha1-80" \
    srtpdec name=d \
    uridecodebin uri="file://$SELF_PATH" \
        ! videoconvert ! x264enc tune=zerolatency \
        ! rtph264pay \
        ! "application/x-rtp,payload=(int)103,ssrc=(uint)$SELF_VSSRC" \
        ! r.send_rtp_sink \
    r.send_rtp_src \
        ! e.rtp_sink_0 \
    e.rtp_src_0 \
        ! udpsink host=$PEER_IP port=$PEER_V \
    r.send_rtcp_src \
        ! e.rtcp_sink_0 \
    e.rtcp_src_0 \
        ! udpsink host=$PEER_IP port=$((PEER_V+1)) sync=false async=false \
    udpsrc port=$((SELF_V+1)) \
        ! "application/x-srtcp,$SRTP_CAPS" \
        ! d.rtcp_sink \
    d.rtcp_src \
        ! tee name=t \
        t. ! queue ! r.recv_rtcp_sink \
        t. ! queue ! fakesink dump=true async=false'
      </pre>
    </div>
    <div class="row">
      <br>
      <label class="control-label" for="console">Console</label>
      <br>
      <br>
      <div id="console" class="democonsole" style="height: 250px;">
        <ul></ul>
      </div>
    </div>
  </div>

  <footer>
    <div class="foot-fixed-bottom">
      <div class="container text-center">
        <hr>
        <div class="row">&copy; 2018 Kurento</div>
        <div class="row">
          <div class="col-md-4">
            <a href="https://www.urjc.es/">
              <img src="/img/urjc.gif" alt="Universidad Rey Juan Carlos" height="50px">
            </a>
          </div>
          <div class="col-md-4">
            <a href="https://kurento.openvidu.io/">
              <img src="/img/kurento.png" alt="Kurento" height="50px">
            </a>
          </div>
          <div class="col-md-4">
            <a href="https://www.naevatec.com/">
              <img src="/img/naevatec.png" alt="Naevatec" height="50px">
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>